<template>
  <div>
    <div v-if="isShow">
      <!-- 条件查询营销任务列表 -->
      <div class="check-form-box">
        <el-form
          :inline="true"
          :model="searchModel.data"
          class="demo-form-inline"
        >
          <el-form-item label="营销ID">
            <el-input
              v-model.trim="searchModel.id"
              placeholder="请输入营销ID"
            />
          </el-form-item>
          <el-form-item label="使用场景">
            <el-select
              v-model="searchModel.useSceneType"
              placeholder="请选择状态"
            >
              <el-option label="全部" :value="null" />
              <el-option label="加油" :value="1" />
              <el-option label="洗车" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="searchModel.createDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item label="适用套餐ID">
            <el-input
              v-model.trim="searchModel.dataId"
              placeholder="请输入适用套餐ID"
            />
          </el-form-item>
          <el-form-item label="添加人">
            <el-input
              v-model.trim="searchModel.addUserName"
              placeholder="请输入添加人"
            />
          </el-form-item>
          <el-form-item label="审核人">
            <el-input
              v-model.trim="searchModel.auditorName"
              placeholder="请输入审核人"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" color="#ea5b24" @click="searchOrder()"
              >查询</el-button
            >
            <el-button
              type="primary"
              color="#ea5b24"
              @click="showDetails()"
              v-if="pinia.isShow[167]"
              >添加</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <!-- 营销任务数据列表 -->
      <div style="margin-top: 20px">
        <el-table :data="tableData.data" style="width: 100%">
          <el-table-column prop="createTime" width="160" label="添加时间" />
          <el-table-column prop="id" width="180" label="营销任务ID" />
          <el-table-column prop="useSceneType" label="使用场景">
            <template #default="scope">
              {{
                scope.row.useSceneType == null
                  ? ""
                  : scope.row.useSceneType == 1
                  ? "加油"
                  : "洗车"
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="couponName"
            width="140"
            label="任务名称"
            show-overflow-tooltip="true"
          />
          <el-table-column
            prop="couponShowExplain"
            width="200"
            label="券显示说明"
            show-overflow-tooltip="true"
          />
          <el-table-column
            prop="scopeIds"
            width="100"
            label="适用套餐ID"
            show-overflow-tooltip="true"
          />
          <el-table-column
            prop="provideType"
            width="110"
            :formatter="judgeProvideType"
            label="发放类型"
          />
          <el-table-column prop="couponPrice" label="券面金额" />
          <el-table-column prop="couponTotalNum" label="总量" />
          <el-table-column
            prop="provideCondition"
            width="110"
            :formatter="judgeProvideCondition"
            label="发放条件"
          />
          <el-table-column
            prop="status"
            :formatter="judgeState"
            width="100"
            label="状态"
          />
          <el-table-column prop="addUserName" label="添加人" />
          <el-table-column prop="auditorName" label="审核人" />
          <el-table-column fixed="right" label="操作" width="120">
            <template v-slot:default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="showDetails(scope.row)"
                v-if="pinia.isShow[168]"
                >查看详情</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="disableMKT(scope.row)"
                v-if="scope.row.status == 1 && pinia.isShow[169]"
                >禁用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页插件 -->
        <div style="text-align: center">
          <el-pagination
            :total="totalNum"
            @current-change="handleCurrentChange"
            background
            :page-size="size"
            layout="prev, pager, next, total"
            :current-page="page"
          />
        </div>
      </div>
    </div>
    <div v-else>
      <detaild
        :detaildData="detaildData"
        @packConfigBack="showDetails"
      ></detaild>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import detaild from "./detaild.vue";
import { findMKTListApi, checkMKTStatusApi } from "../../../api/index";
import { formatDateTime } from "../../../utils/formatDateTime";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

// 翻页
let flipData = reactive({
  pageNum: page,
  pageSize: size,
});
const handleCurrentChange = (val: number) => {
  page.value = val;
  flipData.pageNum = page.value;
  findMKT(flipData);
};

// 控制详情组件显示
const isShow = ref(true);
// 传入详情组件参数
const detaildData = ref({
  id: null,
});

// 搜索模型
const searchModel: any = reactive({
  id: null,
  useSceneType: null,
  dataId: null,
  addUserName: null,
  auditorName: null,
  createDate: null,
  createStartTime: null,
  createEndTime: null,
  pageNum: page,
  pageSize: size,
});

// 过滤状态显示
function judgeState(item) {
  switch (item.status) {
    case 0:
      return "待审核";
    case 1:
      return "启用";
    case 2:
      return "禁用";
    case 3:
      return "审核不通过";
    default:
      return "";
  }
}

// 过滤发放类型显示
function judgeProvideType(item) {
  switch (item.provideType) {
    case 1:
      return "系统自动发放";
    case 2:
      return "手动发放";
    case 3:
      return "自助领取";
    default:
      return "";
  }
}

// 过滤发放条件显示
function judgeProvideCondition(item) {
  switch (item.provideCondition) {
    case 1:
      return "支付成功";
    case 2:
      return "激活成功";
    case 3:
      return "立即发放";
    case 4:
      return "领取成功发放";
    default:
      return "";
  }
}

// 展示详情
const showDetails = (item = null) => {
  if (item) {
    detaildData.value.id = item.id;
  } else {
    detaildData.value.id = null;
    renewTime();
    findMKT(searchModel);
  }
  isShow.value = !isShow.value;
};

const searchOrder = () => {
  page.value = 1;
  if (searchModel.createDate) {
    searchModel.createStartTime = formatDateTime(searchModel.createDate[0]);
    searchModel.createEndTime = formatDateTime(
      searchModel.createDate[1]
    ).replace("00:00:00", "23:59:59");
  } else {
    searchModel.createStartTime = null;
    searchModel.createEndTime = null;
  }
  searchParmSearch();
  findMKT(searchModel);
  flipData = JSON.parse(JSON.stringify(searchModel));
};
// 搜索参数检查
const searchParmSearch = () => {
  Object.keys(searchModel).forEach((key) => {
    if (!searchModel[key]) {
      searchModel[key] = null;
    }
  });
};

// 查询营销任务列表
const findMKT = (searchModel) => {
  findMKTListApi(searchModel).then((res) => {
    if (res.data.code === 2000) {
      tableData.data = res.data.data.items;
      totalNum.value = res.data.data.total;
    } else {
      ElMessage.error("查询失败");
    }
  });
};

// 禁用
const disableMKT = (item) => {
  ElMessageBox.confirm("是否确认禁用?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    checkMKTStatusApi({ id: item.id, status: 2 }).then((res) => {
      if (res.data.code === 2000) {
        ElMessage({
          message: "禁用成功.",
          type: "success",
        });
        findMKT(searchModel);
      } else {
        ElMessage.error("禁用失败.");
      }
    });
  });
};

const renewTime = () => {
  // 获取当前时间
  let nowTime = new Date().getTime();
  let startTime = pinia.timeConversion(
    new Date(new Date().getFullYear(), new Date().getMonth(), 1).setHours(
      0,
      0,
      0
    )
  );
  let endTime = pinia.timeConversion(
    new Date(new Date().toLocaleDateString()).getTime() +
      24 * 60 * 60 * 1000 -
      1
  );
  searchModel.createDate = [startTime, endTime];
};

onMounted(() => {
  findMKT(searchModel);
  renewTime();
});
</script>
<style scoped>
:deep(.demo-form-inline) {
  display: grid;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, 25%);
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item) {
  width: 90%;
}

.subBtnBox {
  width: 100%;
  margin-bottom: 20px;
  display: block;
  text-align: center;
}
</style>
